<template>
  <div>
    <Headnav title="个人中心" :showhome='true'></Headnav>
    <div class="header">
      <!-- 头像 -->
      <div class="avatar">
        <img :src='userInfo.head_img' v-if='userInfo.head_img'>
        <img src="../assets/xixi.png" v-else>
      </div>
      <!-- 姓名 -->
      <div class="profile">
        <div>
          <span class="iconfont iconxingbienan" v-if='userInfo.gender===1'></span>
          <span class="iconfont iconxingbienv" v-else></span>
          {{userInfo.nickname}}
        </div>
        <p  v-if='userInfo.create_date'>{{userInfo.create_date.split('T')[0]}}</p>
      </div>
      <span class="arrow iconfont iconjiantou1" @click="$router.push('/editinfo')"></span>
    </div>
    <div class="liberlist">
      <liberlist mainleft="我的关注" mainright="关注的用户" @click.native="$router.push('/focus')"></liberlist>
      <liberlist mainleft="我的跟帖" mainright="跟帖/回复"></liberlist>
      <liberlist mainleft="我的收藏" mainright="文章/视频"></liberlist>
      <liberlist mainleft="设置" mainright></liberlist>
    </div>
    <mybtn btntext="退出登录"></mybtn>
  </div>
</template>

<script>
import liberlist from "../components/libarlist";
import mybtn from "../components/mybtn";
import Headnav from '../components/headnav'
export default {
    data(){
         return {
             userInfo:''
         }
    },
  components: {
    liberlist,
    mybtn,
    Headnav
    
  },
  created(){
      this.$axios({
          url:'/user/'+ localStorage.getItem('userId'),
          headers: {
        Authorization: "Bearer " + localStorage.getItem("token"),
      },
      }).then(res=>{
        //   console.log(1323,res);
          this.userInfo=res.data.data
          console.log(this.userInfo);
      })
  }
};
</script>

<style lang='less' scoped>
@import url("http://at.alicdn.com/t/font_1426139_h6vn3jbl5q.css");
.nav-bar {
  height: 48/360 * 100vw;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-left: 20/360 * 100vw;
  padding-right: 20/360 * 100vw;
}
.header {
  padding: 20/360 * 100vw;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 5px solid #cccccc;
  .avatar {
    img {
      display: block;
      width: 70/360 * 100vw;
      height: 70/360 * 100vw;
      border-radius: 50%;
      object-fit: cover;
    }
  }
  .profile {
    flex: 1;
    // line-height: 1.5;
    padding-left: 20/360 * 100vw;
    p {
      color: #999;
    }
  }
}
.liberlist{
    margin-bottom: 30/360*100vw;
}

</style>